<template>
  <div>
    <el-card shadow="never" style="width: 700px; margin: 50px auto 0 auto">
      <div style="text-align: center">
        <span>{{isEdit ? '编辑' : '新增'}}</span>
        <el-divider direction="vertical"></el-divider>
        <span>建筑</span>
      </div>
    </el-card>
    <el-card shadow="never" style="margin: 20px auto 0 auto; width: 700px">
      <div style="margin: 25px auto 0 auto;">
        <el-form :model="archiInfo" :rules="rules" ref="infoForm" label-width="90px" style="width: 600px" size="small">
          <el-form-item label="建筑名称：" prop="name">
            <el-input v-model="archiInfo.name" placeholder="请输入建筑名称"></el-input>
          </el-form-item>
<!--          <el-form-item label="所在城市：" prop="city">-->
<!--            <el-input v-model="archiInfo.city" placeholder="请输入所在城市"></el-input>  &lt;!&ndash; 之后可以使用城市的级联选择器! &ndash;&gt;-->
<!--          </el-form-item>-->
          <el-form-item label="所在地区" prop="city">
            <city-cascader v-model="archiInfo.city" :is-search="false"></city-cascader>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="经度：" prop="longitude">
              <el-input v-model="archiInfo.longitude" placeholder="请输入经度"></el-input>
            </el-form-item>
            <el-form-item label="纬度：" prop="latitude">
              <el-input v-model="archiInfo.latitude" placeholder="请输入纬度"></el-input>  <!-- 如果可以在地图上选东经北纬, 或者使用更好的输入方式就更好了 -->
            </el-form-item>
          </div>
          <el-form-item label="海拔：" prop="altitude">
            <el-input v-model="archiInfo.altitude" placeholder="请输入海拔, 单位: 米"></el-input>   <!-- 换成专门的数字输入器的那种会更好 -->
          </el-form-item>
          <el-form-item label="类别：" prop="categories">
            <category-cascader v-model="archiInfo.categories" :is-search="false"></category-cascader>
          </el-form-item>
          <el-form-item label="年代：" prop="period">
            <el-input v-model="archiInfo.period" placeholder="请输入年代"></el-input>
          </el-form-item>
          <el-form-item label="保护类型：" prop="protectType">
            <el-input v-model="archiInfo.protectType" placeholder="请输入保护类型"></el-input>
          </el-form-item>
          <el-form-item label="具体描述："  prop="description">
            <el-input v-model="archiInfo.description" type="textarea" placeholder="请输入具体描述, 上限 100 字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="medium" style="display: block; width: 250px; margin: 20px auto 0 auto;" @click="submit('infoForm')">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { addArchi, getArchi, updateArchi } from "@/api/info";
import CityCascader from './CityCascader'
import CategoryCascader from "@/views/info/components/CategoryCascader";

const defaultArchiInfo = {
  id: null,
  name: null,
  city: null,
  latitude: null,
  longitude: null,
  altitude: null,
  categories: null,
  period: null,
  protectType: null,
  description: null,
};

export default {
  name: "ArchiInfo",
  components: {
    CategoryCascader,
    CityCascader
  },
  props: {
    // value: Object, 父组件 v-model 默认绑定的, 可以测试一下如果把 value 改成别的值, 还会不会传值成功! 但这里没有父组件, 所以就没用了
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    archiInfo: {
      deep: true,
      handler(obj) {
        console.log("new City =>")
        console.log(obj.city)
      },
    },
  },
  data() {
    return {
      archiInfo: Object.assign({}, defaultArchiInfo),
      rules: {},
      cityArray: null
    };
  },
  created() {
    if (this.isEdit) {
      console.log("被编辑的对象ID => " + this.$route.query.id);
      getArchi(this.$route.query.id).then((response) => {
        console.log("被编辑的对象 =>");
        console.log(response.data.list[0]);
        let info = response.data.list[0]
        this.archiInfo = Object.assign({}, info);
        this.archiInfo.categories = {
          large: info.largeCate,
          mid: info.midCate,
          min: info.minCate
        }
        console.log(this.archiInfo)
      });
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.archiInfo)
        if (valid) {
          if (this.isEdit) {
            updateArchi(this.archiInfo, this.$route.query.id).then((resp) => {
              this.$message.success("编辑成功!");
              this.$router.push({ path: "/info" });
              // 修改按钮状态
            });
          } else {
            addArchi(this.archiInfo).then((resp) => {
              this.$message.success("添加成功!");
              this.$router.push({ path: "/info" });
              this.archiInfo = Object.assign({}, defaultArchiInfo);
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
